import React, { Component } from 'react';
import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/mode-java';
import 'ace-builds/src-noconflict/mode-sql';
import 'ace-builds/src-noconflict/theme-solarized_dark';
import 'ace-builds/src-noconflict/theme-textmate';
import 'ace-builds/src-noconflict/ext-language_tools';
import 'ace-builds/webpack-resolver';

class CommonEditor extends Component {

  constructor (props) {
    super(props);
  }

  onChange = value => {
    this.props.onChange(value);
  };

  render () {
    const {
      content,
      theme = 'textmate',
      options = {
        // 基础的自动完成
        enableBasicAutocompletion: true,
        // 实时自动完成
        enableLiveAutocompletion: true,
        // 代码块
        enableSnippets: true,
        // 显示行号
        showGutter: true,
        showLineNumbers: true,
        displayIndentGuides: false,
        showPrintMargin: false,
        fontSize: '15px',
      },
      className = '',
      height = '800px',
      mode = 'json',
    } = this.props;

    return <div className={className}>
      <AceEditor
        width='100%'
        height={height}
        mode={mode}
        theme={theme}
        value={content}
        onChange={value => this.onChange(value)}
        editorProps={{
          blockScrolling: true,
        }}
        setOptions={options}
      />
    </div>;
  }
}

export default CommonEditor;
